import { businessStateMap } from "../../store";
import clubAvatar from "../clubAvatar";
export default defineComponent({
  components: {
    clubAvatar,
  },
  props: {
    formState: {
      type: Object,
      default: () => ({
        type: 1,
        id: null,
        im_groupid: null,
        name: null,
        personNum: null,
        nickname: null,
        uid: null,
        introduction: null,
        status: null,
        sex: null,
        created_at: null,
        updated_at: null,
        avatar: null,
      }),
    },
  },
  emits: ["updateStatus"],
  setup(props, { attrs, emit, expose, slots }) {
    return () => (
      <>
        <div style="width: 100%;display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
          <s-title style="margin: 0">{$t("base.clubInfo")}</s-title>
          <div style="display: flex;gap: 10px;">
            <s-button size="small" onClick={() => emit("updateStatus")}>
              {props.formState.status === 0 ? $t("club6") : $t("club7")}
            </s-button>
          </div>
        </div>

        <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
          <a-col span={8}>
            {$t("club8")}：{props.formState.im_groupid}
          </a-col>
          <a-col span={10}>
            {$t("club9")}：{props.formState.name}
          </a-col>
          <a-col span={6}>
            <div style="display: flex;align-items: center;">
              {$t("club13")}:
              <clubAvatar
                data={props.formState}
                nicknameTextColor="#333"
                isShowSexIcon={false}
                style="flex: none;margin: 0 10px;"
              />
            </div>
          </a-col>
        </a-row>
        <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
          <a-col span={8}>
            {$t("club10")}：{props.formState.personNum}
          </a-col>
          <a-col span={8}>
            {$t("club11")}：
            {selectDictLabel(businessStateMap, props.formState.status)}
          </a-col>
        </a-row>
        <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
          <a-col span={24}>
            {$t("club12")}：{props.formState.introduction}
          </a-col>
        </a-row>
      </>
    );
  },
});
